<template>
	<view class="content">
		<CustomNav :isBack="true" :custom="custom" :title="'发起面试邀请'"></CustomNav>
		<view :style="'margin-top:'+(custom.statusBar+custom.nvaMartom+custom.navHeight+60)+'rpx;'" class="name">
			邀请{{name}}参加线上面试</view>
		<view class="form-block">
			<view class="form-item">
				<view class="label">面试职位</view>
				<picker class="form-picker" :range="position" range-key="name" @change="bindPosition">
					{{position[positionIndex].name}}</picker>
				<view class="iconfont icon-gengduo1"></view>
			</view>
			<view class="form-item">
				<view class="label">面试方式</view>
				<input :disabled="true" class="form-input" value="视频面试" />
				<view style="visibility: hidden;" class="iconfont icon-gengduo1"></view>
			</view>
			<view class="form-item">
				<view class="label">联系人</view>
				<input :disabled="true" class="form-input" :value="contact" />
				<view style="visibility: hidden;" class="iconfont icon-gengduo1"></view>
			</view>
		</view>
		<view class="form-block">
			<view class="form-item">
				<view class="label">面试日期</view>
				<picker class="form-picker" mode="date" @change="bindDate" :start="start">{{date}}</picker>
				<view class="iconfont icon-gengduo1"></view>
			</view>
			<view class="form-item">
				<view class="label">面试时间</view>
				<picker class="form-picker" mode="time" @change="bindTime">{{time}}</picker>
				<view class="iconfont icon-gengduo1"></view>
			</view>
		</view>
		<view style="padding: 30rpx;" class="form-block">
			<view class="block-title">备注事项</view>
			<textarea v-model="remarks" maxlength="300" placeholder-class="inputPlaceholder"
				class="form-textarea"></textarea>
		</view>
		<view @click="handleSave" class="button">发送面试邀请</view>
	</view>
</template>

<script>
	import CustomNav from '../components/CustomNav/CustomNav';
	import {
		getPositionList,
		submitInterview
	} from '@/api/interview.js';
	import {
		getStorage
	} from '@/util/auth.js';
	import {
		validate
	} from '@/util/validate.js';
	import {
		getCurrentTime,
		getCustomNavData,
		get24HoursTime
	} from '@/util/util.js'
	export default {
		data() {
			return {
				start: getCurrentTime('d'),
				custom: null,
				name: '', //对方名称
				position: [],
				positionIndex: 0,
				contact: '', //本人名称和手机号
				date: '请选择',
				time: '请选择',
				remarks: '',
				mobile: '', //对方手机号
			}
		},
		methods: {
			getPosition() {
				uni.showLoading({
					title: '加载中',
					mask: true,
				})
				getPositionList().then((res) => {
					uni.hideLoading()
					const list = res;
					if (list.length == 0) {
						this.showToast('无可选择的岗位，请在职位管理发布', () => {
							uni.redirectTo({
								url: '/page_other/position/position_manage'
							})
						})
					}
					let position = [];
					for (let i = 0; i < list.length; i++) {
						const current = list[i];
						position.push({
							id: current.id,
							name: current.jobTitle + ' ' + current.minSalary + ' - ' + current.maxSalary +
								'元'
						})
					}
					this.position = position;
				}).catch((res) => {
					uni.hideLoading()
					this.showToast('加载失败，请重试！', () => {
						uni.navigateBack()
					})
				})
			},
			bindPosition(e) {
				this.positionIndex = e.detail.value;
			},
			bindDate(e) {
				this.date = e.detail.value;
			},
			bindTime(e) {
				this.time = get24HoursTime(e.detail.value);
			},
			handleSave() {
				const form = {
					remarks: this.remarks,
					interviewTime: this.date + ' ' + this.time,
					pid: this.position[this.positionIndex].id,
					mobile: this.mobile,
					plan: 1,
					id: 0
				}
				const rules = {
					pid: {
						name: '面试职位',
						required: true
					},
					interviewTime: {
						name: '面试日期和时间',
						required: true,
						validator: function(value, form, callback) {
							if (value.length < 15) {
								callback('请选择正确的面试日期和时间');
							}
							callback();
						}
					}
				}
				if (validate(form, rules)) {
					uni.showModal({
						title: '面试诚信原则',
						content: '面试前3小时，双方可申请取消\n如不取消，请按时出席\n爽约乙方，平台会打【不良记录】',
						cancelText: '我再想想',
						confirmText: '不爽约',
						success: (confirm) => {
							if (confirm.confirm) {
								uni.showLoading({
									title: '发送中',
									mask: true
								})
								submitInterview(form).then((res) => {
									uni.hideLoading();
									const id = res.id;
									const invited = uni.$TUIKit.createCustomMessage({
										to: this.userID,
										conversationType: uni.$TUIKitTIM.TYPES.CONV_C2C,
										payload: {
											data: 'invited',
											description: '发送面试邀请',
											extension: JSON.stringify({
												id,
												agree: null
											})
										}
									})
									uni.$TUIKit.sendMessage(invited).then((messageRes) => {
										uni.$emit('updateMessageList', invited)
										this.showToast('发送邀请成功', () => {
											uni.navigateBack();
										})
									}).catch(() => {
										this.showToast('操作失败，请重试！');
									})
								}).catch((res) => {
									uni.hideLoading();
									this.showToast('发送失败，请稍后重试');
								})
							}
						}
					})

				}
			},
		},
		components: {
			CustomNav,
		},
		onLoad(e) {
			this.userID = e.userID;
			const user = this.$store.getters.user;
			this.contact = user.realName + ' · ' + user.mobile;
			this.mobile = e.mobile;
			this.custom = getCustomNavData();
			this.name = e.name;
			this.getPosition();
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		background: linear-gradient(#fc0a3a, #f8f8f8, #f8f8f8, #f8f8f8);
		overflow: hidden;
		min-height: 100vh;
	}

	.name {
		font-size: 42rpx;
		color: #fff;
		position: relative;
		padding: 0 40rpx;
		font-weight: bold;
		margin-bottom: 40rpx;
	}

	.form-block {
		margin: 0 auto;
		width: calc(100% - 60rpx);
		padding: 0 30rpx;
		background: #fff;
		border-radius: 20rpx;
		margin-bottom: 20rpx;
		box-shadow: 0 0 9px 0px #dcdcdc;

		.form-item {
			width: 100%;
			height: 120rpx;
			border-bottom: 1px solid #efefef;
			display: flex;
			flex-direction: row;
			align-items: center;

			.label {
				font-size: 28rpx;
				width: 140rpx;
				color: #717171;
			}

			.form-picker,
			.form-input {
				font-size: 30rpx;
				flex-grow: 1;
				font-weight: bold;
			}

			.iconfont {
				flex-grow: 0;
				font-size: 29rpx;
				font-weight: bold;
			}
		}

		.form-item:last-child {
			border: none;
		}

		.block-title {
			font-size: 36rpx;
			font-weight: bold;
			margin-bottom: 20rpx;

			.form-textarea {
				width: 100%;
				height: 300rpx;
			}
		}
	}

	.button {
		width: calc(100% - 60rpx);
		height: 80rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #fff;
		font-size: 28rpx;
		border-radius: 10rpx;
		margin: 20rpx auto;
		box-shadow: 0 0 9px 0px #dcdcdc;
		background: #0256FF;
	}
</style>